<template>
  <div class="quiz">
    <div class="page-header">
      <div class="header-top">
        <button class="back-btn" @click="$router.push('/challenge')">← 返回挑战</button>
        <h1>气候变化知识挑战</h1>
        <div class="timer">⏱️ 02:45</div>
      </div>
      <div class="progress-indicator">
        <div class="progress-text">第 3 题 / 共 5 题</div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: 60%"></div>
        </div>
      </div>
    </div>
    
    <div class="quiz-content" v-if="!showResult">
      <div class="question-card">
        <h2>下列哪种气体是导致全球变暖的主要温室气体？</h2>
        <div class="options">
          <div class="option" :class="{ selected: selectedOptionId === 1 }" @click="selectOption(1)">
            <input type="radio" id="option1" name="answer" value="1" :checked="selectedOptionId === 1">
            <label for="option1">A. 氧气 (O₂)</label>
          </div>
          <div class="option" :class="{ selected: selectedOptionId === 2 }" @click="selectOption(2)">
            <input type="radio" id="option2" name="answer" value="2" :checked="selectedOptionId === 2">
            <label for="option2">B. 二氧化碳 (CO₂)</label>
          </div>
          <div class="option" :class="{ selected: selectedOptionId === 3 }" @click="selectOption(3)">
            <input type="radio" id="option3" name="answer" value="3" :checked="selectedOptionId === 3">
            <label for="option3">C. 氮气 (N₂)</label>
          </div>
          <div class="option" :class="{ selected: selectedOptionId === 4 }" @click="selectOption(4)">
            <input type="radio" id="option4" name="answer" value="4" :checked="selectedOptionId === 4">
            <label for="option4">D. 氢气 (H₂)</label>
          </div>
        </div>
        
        <div class="question-actions">
          <button class="prev-btn">上一题</button>
          <button class="submit-btn" @click="submitAnswer" :disabled="selectedOptionId === null">提交答案</button>
          <button class="next-btn">下一题</button>
        </div>
      </div>
      
      <div class="quiz-info">
        <div class="info-card">
          <h3>挑战信息</h3>
          <p>📚 题目数量: 5题</p>
          <p>⭐ 奖励积分: 50碳积分</p>
          <p>⏱️ 时间限制: 10分钟</p>
        </div>
      </div>
    </div>
    
    <!-- 添加结果显示区域 -->
    <div class="quiz-content" v-else>
      <div class="question-card">
        <h2>下列哪种气体是导致全球变暖的主要温室气体？</h2>
        <div class="result-info">
          <div class="result-status" :class="{ correct: isCorrect, incorrect: !isCorrect }">
            <span v-if="isCorrect">✅ 答题正确</span>
            <span v-else>❌ 答题错误</span>
          </div>
          
          <div class="selected-answer">
            <p><strong>你的答案:</strong> {{ selectedOptionContent }}</p>
            <p v-if="!isCorrect"><strong>正确答案:</strong> {{ correctOptionContent }}</p>
          </div>
          
          <div class="explanation" v-if="explanation">
            <h3>解析:</h3>
            <p>{{ explanation }}</p>
          </div>
          
          <div class="score-info" v-if="scoreEarned > 0">
            <p>本次得分: {{ scoreEarned }}分</p>
            <p>总积分: {{ totalScore }}分</p>
          </div>
        </div>
        
        <div class="question-actions">
          <button class="prev-btn">上一题</button>
          <button class="next-btn">下一题</button>
        </div>
      </div>
      
      <div class="quiz-info">
        <div class="info-card">
          <h3>挑战信息</h3>
          <p>📚 题目数量: 5题</p>
          <p>⭐ 奖励积分: 50碳积分</p>
          <p>⏱️ 时间限制: 10分钟</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 数据状态
const selectedOptionId = ref<number | null>(null)
const showResult = ref(false)
const isCorrect = ref(false)
const scoreEarned = ref(10)
const selectedOptionContent = ref('')
const correctOptionContent = ref('B. 二氧化碳 (CO₂)')
const explanation = ref('二氧化碳是最主要的温室气体之一，它能够吸收和辐射红外辐射，导致温室效应增强，从而引起全球变暖。')
const totalScore = ref(150)

// 选择选项
const selectOption = (optionId: number) => {
  selectedOptionId.value = optionId
}

// 提交答案
const submitAnswer = () => {
  if (selectedOptionId.value === null) {
    showMessage('请选择一个答案','error')
    return
  }
  
  // 设置选中的选项内容
  const optionContents: Record<number, string> = {
    1: 'A. 氧气 (O₂)',
    2: 'B. 二氧化碳 (CO₂)',
    3: 'C. 氮气 (N₂)',
    4: 'D. 氢气 (H₂)'
  }
  
  selectedOptionContent.value = optionContents[selectedOptionId.value]
  isCorrect.value = selectedOptionId.value === 2 // 假设正确答案是选项2
  showResult.value = true
}

const showMessage = (message: string, type: 'success' | 'error' = 'success') => {
  const toast = document.createElement('div')
  toast.textContent = message
  const base = 'position:fixed;left:50%;bottom:80px;transform:translateX(-50%);padding:10px 16px;border-radius:10px;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,0.25);z-index:9999;font-size:14px;opacity:0.95;'
  const bg = type === 'success' ? 'background:#2E8B57;' : 'background:#E74C3C;'
  toast.setAttribute('style', base + bg)
  document.body.appendChild(toast)
  setTimeout(() => {
    toast.style.transition = 'opacity 0.3s ease'
    toast.style.opacity = '0'
    setTimeout(() => { toast.remove() }, 300)
  }, 1800)
}
</script>

<style scoped>
.quiz {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 1.8rem;
  margin: 0;
  color: #2c3e50;
  flex: 1;
  text-align: center;
  padding: 0 20px;
}

.back-btn, .timer {
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  white-space: nowrap;
}

.back-btn {
  background-color: #f8f9fa;
  color: #495057;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.back-btn:hover {
  background-color: #e9ecef;
}

.timer {
  background-color: #42b983;
  color: white;
  display: flex;
  align-items: center;
  gap: 5px;
}

.progress-indicator {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
}

.progress-text {
  text-align: center;
  margin-bottom: 10px;
  color: #495057;
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background-color: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #42b983, #2a8a64);
  border-radius: 6px;
}

.quiz-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.question-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  box-sizing: border-box;
}

.question-card h2 {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 1.5rem;
  line-height: 1.4;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.option {
  padding: 15px 20px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  transition: all 0.3s;
  cursor: pointer;
}

.option:hover {
  border-color: #42b983;
  background-color: #f8f9fa;
}

.option.selected {
  border-color: #42b983;
  background-color: #e8f5ee;
}

.option input {
  margin-right: 15px;
}

.option label {
  cursor: pointer;
  font-size: 1.1rem;
  color: #495057;
}

.option input:checked + label {
  font-weight: bold;
  color: #2c3e50;
}

.option input:checked {
  accent-color: #42b983;
}

.question-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.prev-btn, .next-btn, .submit-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.prev-btn, .next-btn {
  background-color: #f8f9fa;
  color: #495057;
}

.prev-btn:hover, .next-btn:hover {
  background-color: #e9ecef;
}

.submit-btn {
  background-color: #42b983;
  color: white;
}

.submit-btn:hover:not(:disabled) {
  background-color: #359c6d;
  transform: scale(1.05);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quiz-info {
  align-self: start;
}

.info-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 25px;
  box-sizing: border-box;
}

.info-card h3 {
  margin-top: 0;
  color: #2c3e50;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.info-card p {
  margin: 15px 0;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 新增的结果显示样式 */
.result-info {
  margin-bottom: 30px;
}

.result-status {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 8px;
}

.result-status.correct {
  background-color: #e8f5ee;
  color: #42b983;
}

.result-status.incorrect {
  background-color: #fce8e8;
  color: #ff6b6b;
}

.selected-answer {
  margin-bottom: 20px;
}

.selected-answer p {
  margin: 10px 0;
  font-size: 1.1rem;
}

.explanation {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.explanation h3 {
  margin-top: 0;
  color: #2c3e50;
}

.explanation p {
  margin: 10px 0;
  line-height: 1.6;
  color: #495057;
}

.score-info {
  background-color: #e8f5ee;
  padding: 15px;
  border-radius: 8px;
}

.score-info p {
  margin: 8px 0;
  font-weight: 500;
  color: #42b983;
}

@media (max-width: 768px) {
  .quiz-content {
    grid-template-columns: 1fr;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
    padding: 0 10px;
  }
  
  .question-card {
    padding: 20px;
  }
  
  .question-card h2 {
    font-size: 1.3rem;
  }
  
  .option {
    padding: 12px 15px;
  }
  
  .option label {
    font-size: 1rem;
  }
  
  .question-actions {
    flex-direction: column;
    gap: 15px;
  }
  
  .prev-btn, .next-btn, .submit-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .quiz {
    padding: 15px;
  }
  
  .page-header {
    padding: 15px;
  }
  
  .header-top {
    flex-direction: column;
    gap: 15px;
  }
  
  .page-header h1 {
    font-size: 1.3rem;
    padding: 0;
  }
  
  .back-btn, .timer {
    padding: 8px 15px;
    font-size: 0.9rem;
  }
  
  .question-card {
    padding: 15px;
  }
  
  .info-card {
    padding: 20px;
  }
}
</style>
